<template>
	<view class="goods-detail-container">
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in good_info.picture" :key="i">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<!-- 商品信息区域 -->
		<view class="goods-info-box">
			<!-- 商品价格 -->
			<view class="price">￥{{good_info.price}}</view>
			<!-- 信息主体区域 -->
			<view class="goods-info-body">
				<!-- 商品名称 -->
				<view class="goods-name"><text space="nbsp"><text class="font-weight">{{good_info.name}}</text>  {{good_info.body}}</text></view>
				
				<!-- 收藏 -->
				<view class="favi">
					<uni-icons type="star" size="18" color="gray"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<!-- 运费 -->
			<view class="yf">快递：免运费</view>
		</view>
		<!-- 商品导航组件 -->
		<view class="goods_nav">
		  <!-- fill 控制右侧按钮的样式 -->
		  <!-- options 左侧按钮的配置项 -->
		  <!-- buttonGroup 右侧按钮的配置项 -->
		  <!-- click 左侧按钮的点击事件处理函数 -->
		  <!-- buttonClick 右侧按钮的点击事件处理函数 -->
		  <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import{ mapState,mapMutations,mapGetters} from "vuex"
	export default {
		data() {
			return {
				 // 左侧按钮组的配置对象
				    options: [{
				      icon: 'shop',
				      text: '店铺'
				    }, {
				      icon: 'cart',
				      text: '购物车',
				      info: 2
				    }],
				    // 右侧按钮组的配置对象
				    buttonGroup: [{
				        text: '加入购物车',
				        backgroundColor: '#ff0000',
				        color: '#fff'
				      },
				      {
				        text: '立即购买',
				        backgroundColor: '#ffa200',
				        color: '#fff'
				      }
				    ],
					// good_info:{
						
					// }
				good_info: {

					"id": 101,
					"name": "感冒灵",
					"body": "感冒灵颗粒具有解热镇痛的作用，可用于感冒引起的头痛、发热、鼻塞、流涕、咽痛等",
					"status": "有货",
					"price": "16.66元",
					"picture": [
						"/static/image/ganmaoling.jpg",
						"/static/image/ganmaoling.jpg",
						"/static/image/ganmaoling.jpg",
					]

				}

			};
		},
		watch: {
		   // 定义 total 侦听器，指向一个配置对象
		   total: {
		      // handler 属性用来定义侦听器的 function 处理函数
		      handler(newVal) {
		         const findResult = this.options.find(x => x.text === '购物车')
		         if (findResult) {
		            findResult.info = newVal
		         }
		      },
		      // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
		      immediate: true
		   }
		},
		onLoad(options) {
			 // // 获取商品 Id
			 //  const goods_id = options.id
			 //  // 调用请求商品详情数据的方法
			 //  this.getGoodsDetail(goods_id)

		},
		onShow() {
		   // 在页面刚展示的时候，设置数字徽标
		   this.setBadge()
		},
		computed:{
			...mapState('m_cart',['cart']),
			...mapGetters('m_cart',['total'])
			
		},
		methods:{
			 // 定义请求商品详情数据的方法
			  async getGoodsDetail(goods_id) {
			   await uni.request({
			    	url:"http://localhost:9999/system/druginfo/"+goods_id,
					success: (res) => {
						console.log(res);
						this.good_info=res.data.data
						console.log(this.good_info);
					}
			    })
				
			  },
			 setBadge() {
			      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
			      uni.setTabBarBadge({
			         index: 2, // 索引
			         text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
			      })
			   },
			...mapMutations('m_cart',['addToCart']),
			//商品右侧按钮的点击事件处理函数
			buttonClick(e){
				//1,判断是否点击了加入购物车按钮
				if(e.content.text === '加入购物车'){
					//2.组织一个商品的信息对象
					const goods = {
					         goods_id: this.good_info.id,       // 商品的Id
					         goods_name: this.good_info.name,   // 商品的名称
					         goods_price: this.good_info.price, // 商品的价格
					         goods_count: 1,                           // 商品的数量
					         // goods_small_logo: this.good_info.goods_small_logo, // 商品的图片
					         goods_state: true,
							 goods_path:this.good_info.picture[0]
							// 商品的勾选状态
					      }
					
					      // 3. 通过 this 调用映射过来的 addToCart 方法，把商品信息对象存储到购物车中
					  this.addToCart(goods)
				}
			},
			onClick(e){
				if(e.content.text==="购物车"){
					//切换到购物车页面
					uni.switchTab({
						url:"/pages/news/news"
					})
				}
			}
		}

	}
</script>

<style lang="less">
	swiper {
		height: 650rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	// 商品信息区域的样式
	.goods-info-box {
	  padding: 10px;
	  padding-right: 0;
	
	  .price {
	    color: #c00000;
	    font-size: 18px;
	    margin: 10px 0;
	  }
	
	  .goods-info-body {
	    display: flex;
	    justify-content: space-between;
	
	    .goods-name {
	      font-size: 30rpx;
	      padding-right: 10px;
		 
		  .font-weight{
			  font-weight: bold;
			  font-size: 40rpx;
		  }
		  .font-weight::after{
			  context:"  ";
			  
		  }
	    }
	    // 收藏区域
	    .favi {
	      width: 120px;
	      font-size: 12px;
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	      align-items: center;
	      border-left: 1px solid #efefef;
	      color: gray;
	    }
	  }
	
	  // 运费
	  .yf {
	    margin: 10px 0;
	    font-size: 12px;
	    color: gray;
	  }
	}
	.goods-detail-container {
	  // 给页面外层的容器，添加 50px 的内padding，
	  // 防止页面内容被底部的商品导航组件遮盖
	  padding-bottom: 50px;
	}
	
	.goods_nav {
	  // 为商品导航组件添加固定定位
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	}
</style>